<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>形状词云生成器</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🎨 形状词云生成器</h1>
            <p>上传图片，输入文本，生成个性化形状词云</p>
        </header>

        <main>
            <div class="upload-section">
                <div class="upload-area" id="uploadArea">
                    <div class="upload-content">
                        <svg class="upload-icon" viewBox="0 0 24 24" width="48" height="48">
                            <path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                        </svg>
                        <h3>上传形状图片</h3>
                        <p>支持 PNG、JPG、JPEG 格式</p>
                        <p>建议使用黑白图片，效果更佳</p>
                    </div>
                    <input type="file" id="imageInput" accept="image/*" hidden>
                </div>
                
                <div class="preview-container" id="previewContainer" style="display: none;">
                    <img id="previewImage" alt="预览图片">
                    <button class="btn-secondary" id="changeImage">更换图片</button>
                </div>
            </div>

            <div class="text-section">
                <div class="text-input-header">
                    <label for="textInput">输入文本内容：</label>
                    <div class="file-upload-group">
                        <button type="button" class="btn-file-upload" id="txtUploadBtn">
                            📄 上传TXT文件
                        </button>
                        <input type="file" id="txtFileInput" accept=".txt" hidden>
                        <span id="txtFileName" class="file-name" style="display: none;"></span>
                    </div>
                </div>
                <textarea 
                    id="textInput" 
                    placeholder="请输入要生成词云的文本内容，或点击上方按钮上传TXT文件...&#10;&#10;示例：&#10;人工智能 机器学习 深度学习 神经网络 算法 数据科学 编程 Python JavaScript 前端开发 后端开发 全栈工程师 软件工程 计算机科学 创新 技术 未来"
                    rows="8"
                ></textarea>
            </div>

            <div class="controls-section">
                <div class="control-group">
                    <label for="maxWords">最大词数：</label>
                    <input type="range" id="maxWords" min="50" max="500" value="200">
                    <span id="maxWordsValue">200</span>
                </div>

                <div class="control-group">
                    <label for="fontSize">字体大小：</label>
                    <input type="range" id="fontSize" min="10" max="100" value="40">
                    <span id="fontSizeValue">40</span>
                </div>

                <div class="control-group">
                    <label for="colorScheme">配色方案：</label>
                    <select id="colorScheme">
                        <option value="random">随机色彩</option>
                        <option value="blue">蓝色系</option>
                        <option value="green">绿色系</option>
                        <option value="red">红色系</option>
                        <option value="purple">紫色系</option>
                        <option value="orange">橙色系</option>
                    </select>
                </div>

                <div class="control-group">
                    <label for="backgroundColor">背景颜色：</label>
                    <div class="color-input-group">
                        <input type="color" id="backgroundColor" value="#ffffff">
                        <span id="backgroundColorValue">#ffffff</span>
                    </div>
                </div>

                <button class="btn-primary" id="generateBtn" disabled>
                    <span class="btn-text">生成词云</span>
                    <span class="btn-loading" style="display: none;">生成中...</span>
                </button>
            </div>

            <div class="result-section" id="resultSection" style="display: none;">
                <h3>生成结果</h3>
                <div class="canvas-container">
                    <canvas id="wordcloudCanvas"></canvas>
                </div>
                
                <!-- 词频统计显示区域 -->
                <div class="word-frequency-section" id="wordFrequencySection" style="display: none;">
                    <h4>📊 前20个高词频词语</h4>
                    <div class="frequency-list" id="frequencyList"></div>
                </div>
                
                <div class="result-actions">
                    <button class="btn-secondary" id="downloadBtn">下载词云</button>
                    <button class="btn-secondary" id="regenerateBtn">重新生成</button>
                    <button class="btn-secondary" id="toggleFrequencyBtn">显示词频统计</button>
                </div>
            </div>
        </main>
    </div>

    <!-- 分词库 -->
    <script src="https://cdn.jsdelivr.net/npm/segmentit@2.0.3/dist/umd/segmentit.min.js"></script>
    <!-- WordCloud库 -->
    <script src="js/wordcloud2.js"></script>
    <script src="js/app.js"></script>
</body>
</html>